
<template>
  <div class="customerChurn_container">
    <el-form :inline="true" :model="formInline" class="main_searchBar">
      <el-form-item label="账期">
        <el-date-picker v-model="formInline.month" size="mini" type="month" placeholder="选择账期" value-format="yyyyMM"
          format="yyyyMM"
          :picker-options="pickerOptions"></el-date-picker>
      </el-form-item>
      <el-form-item label="区域:">
        <dx-cascader :area_id.sync="formInline.areaId" :area_name.sync="formInline.areaName" ref="cascader" />
      </el-form-item>
      <!-- <el-form-item label="客户名称:">
        <el-input type="text" size="mini" placeholder="输入客户名称" v-model="formInline.custName"></el-input>
      </el-form-item>-->
      <el-form-item>
        <el-button size="mini" @click="search()" type="primary" id="search_btn">查询</el-button>
        <!-- <el-button size="mini" type="success" id="export_btn" @click="handle_export">导出</el-button> -->
        <el-button size="mini" type="warning" id="export_all" @click="handle_exportAll">批量导出</el-button>
      </el-form-item>
    </el-form>
    <header>
      <p>码号收入多维表</p>
    </header>
    <ux-grid
      size="mini"
      id="tablePx"
      ref="tablePx"
      :header-row-style="{ background: '#eef1f6' }"
      border
      :stripe="true"
      :widthResize="true"
      :height="height"
      style="width: 100%"
      v-loading="showTableLoading"
      show-overflow="tooltip"
      show-header-overflow="title"
    >
      <ux-table-column type="index" width="60" title="序号" fixed="left" align="center" />
      <ux-table-column
        :field="item.prop"
        :title="item.label"
        min-width="130"
        v-for="(item, index) in column"
        :key="index"
        :fixed="item.fixed &&'left'"
      ></ux-table-column>
    </ux-grid>
    <!-- <div class="page">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="formInline.pageNum"
        :page-sizes="[100, 200, 400, 800, 1600,10000]"
        :page-size="formInline.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      ></el-pagination>
    </div>-->
  </div>
</template>

<script>
import * as Col from "../columns";
import { $budgetAPI, $budget } from "@/api";
import {
  setSessionStorage,
  getSessionStorage,
  removeSessionStorage,
} from "@/common/js/storage";
import FileSaver from "file-saver";
import XLSX from "xlsx";
import qs from "qs";
import { getCookie, setCookie } from "@/common/js/cookie";
import prefixAPI from "@/api/prefixAPI"; // prefixAPI 前缀
const url = prefixAPI.pack;
export default {
  data() {
    return {
      formInline: {
        areaId: '',
        areaName: '',
        month: "",
        token: getCookie("token"),
      },
      column: Col.incomeCodeNumColumns,
      pickerOptions: this.pickerDisabled(),
      disabledTime: "",
      showTableLoading: false,
      height: window.innerHeight - 60 - 30 - 130,
      tableData: [],
    };
  },
  methods: {
    getHeight() {
      this.height = window.innerHeight - 60 - 30 - 130;
    },
    getMonth() {
      $budgetAPI.incomeKeepRegionalMonth(
        { maximum: 14 },
        (res) => {
          if (res.code == 0) {
            // console.log(res);
            this.formInline.month = this.moment(res.content).format("yyyyMM");
            this.disabledTime = res.content;
            this.getInitList();
          }
        },
        (err) => {
          console.log(err);
        }
      );
    },
    pickerDisabled() {
      return {
        disabledDate: (time) => {
          let date = this.moment(this.disabledTime);
          let endDate = new Date(date);
          return time.getTime() > endDate.getTime();
        },
      };
    },
    // 初始化列表接口
    getInitList() {
      this.showTableLoading = true;
      $budgetAPI.incomeCodeNumControllerList(
        { ...this.formInline },
        (res) => {
          if (res.code == 0) {
            this.tableData = res.content;
            this.$refs.tablePx.reloadData(this.tableData);
          } else {
            this.tableData = [];
            this.$refs.tablePx.reloadData([]);
          }
          this.showTableLoading = false;
        },
        (err) => {
          console.log(err);
        }
      );
    },
    search() {
      console.log(this.formInline.areaName)
      this.getInitList();
    },
    handle_export() {
      const { formInline } = this;
      var params = {
        ...formInline,
        token: getCookie("token"),
      };
      window.open(
        `${url}/incomeCodeNumController/getIncomeCodeNumExport?${qs.stringify(
          params
        )}`,
        "_self"
      );
    },
    handle_exportAll() {
      // const { formInline } = this;
      // var areaId = JSON.parse(getSessionStorage("accountInfo"))["areaId"];
      var areaName = this.formInline.areaName,
          areaId = this.formInline.areaId,
          time = this.formInline.month.substr(0, 4);

          if(!areaName || !areaId || !time) {
            this.$message({
                type: "error",
                message: "选择区域和账期",
            })
            return false;
          }
          window.open(`/jx_analysis/file/码号收入-${areaName}-${areaId}-${time}.xlsx`, "_self");
    },
  },
  created() {
    this.accountInfo = JSON.parse(getSessionStorage("accountInfo"));
    this.formInline.areaId = this.accountInfo.areaId;
    this.formInline.areaName = this.accountInfo.areaName;
    this.getMonth();
    window.addEventListener("resize", this.getHeight);
  },
  destroyed() {
    // 计算高度
    window.removeEventListener("resize", this.getHeight);
  },
};
</script>

<style lang="scss" scoped>
.customerChurn_container {
  width: 100%;
  height: 100%;
  & > header {
    font-size: 16px;
    margin-bottom: 10px;
  }
  .page_box {
    display: flex;
    justify-content: flex-end;
  }
}
</style>
